<!--
 * @Descripttion: table组件
 * @Author: xp
 * @Date: 2022-09-02 16:59:44
-->

<script>
import "@/styles/btn.scss";
import _axios from "@/api/axios";
const initPara = () => ({
  pagesize: 10,
  pageindex: 1,
});
export default {
  name: "QueryTable",
  props: {
    // 请求参数
    dataForm: {
      type: Object,
      default: () => {
        return {
          formName: "", // 表格参数名称
          url: "", // 请求列表url
          methods: "", // 请求方法
          query: {}, // 搜索条件
          height: "", // table高度
          maxheight: "", // 最大高度
          hasIndex: false, // 是否有序号
          hasPage: true, // 是否有分页
          checkBoxKey: "", // 当前行的 key
          isRadio: false, // 是否单选
          radioKey: "", // 单选当前行
          defaultRadio: "", // 单选选中的index
          switchChangeName: "", // 列表中是否有switch 改变值
          switchChangeVal: "", // 列表中是否有switch 改变值 true
          selectRows: {}, // 选中的行
          isClearSelected: true, // 是否清除选中值
          isChangeColumn: false, // 是否可改变表头
          currentIndex: 0, // 有tab 默认选中的index
          isQdPage: false, // 是否前端分页  需与testTableData数组一起传
          forBidData: [], // 禁止选择 外部传入数组
          forBidFn: () => {}, // 禁止选择 根据传入的方法判断
          pagesize: 10, // 一页展示条数 默认10条
        };
      },
    },
    // 表格右上角提示
    tip: {
      type: String,
      default: () => "",
    },
    // 表格表头
    initColumns: {
      type: Array,
      default: () => [],
    },
    // 表格右上角按钮
    handleList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 表格切换的tabs
    tabsList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 前期画页面需要的模拟数据，不传dataForm里面的url即可生效
    testTableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      tableRes: {}, // 表格返回的整体数据
      tableData: [],
      total: 0, // 总条数
      total_page: 0, // 总页码
      selectedRadios: [],
      currentIndex: 0, /// 当前currentIndex
      page: initPara(),
      showTable: true,
      isLoading: false,
      copyData: [], // 拷贝静态数据
      jumpPage: "", // 跳转页码
    };
  },
  created() {
    this.page.pagesize = this.dataForm.pagesize || this.page.pagesize;
    this.init();
  },
  watch: {
    // 外部动态修改数据
    testTableData: {
      handler(newVal, oldVal) {
        // console.log('------------- +++++++ testTableData2222');
        this.initTestTableData(newVal)
      },
      deep: true
    },
    initColumns(newVal, oldVal) {
      // 如果是同一个数组 不会切换表头
      if (JSON.stringify(newVal) == JSON.stringify(oldVal)) {
        return
      }
      // 监听表头切换
      this.initColumns = newVal || [];
      if (this.dataForm.isChangeColumn) {
        this.showTable = false;
        if (!this.dataForm.url) {
          setTimeout(() => {
            this.showTable = true;
          }, 500);
        }
      }
    },
    "dataForm.currentIndex"(newVal, oldVal) {
      // 监听tab切换
      if (newVal != oldVal) {
        this.handleChangeCurrentIndex(this.tabsList[newVal], newVal);
      }
    },
    // 'dataForm.selectRows.keys'(newVal, oldVal) {
    //   if (newVal) {
    //     this.handleToggleSelect(newVal, this.dataForm.checkBoxKey)
    //   }
    // }
  },
  methods: {
    // 初始化
    init() {
      if (this.dataForm.url) {
        this.$root.isLoading = true;
        const params = {
          ...this.page,
          ...this.dataForm.query,
        };
        _axios({
          method: this.dataForm.methods || "post",
          url: this.dataForm.url,
          data: params,
        })
          .then((res) => {
            this.tableRes = res || {};
            this.showTable = true;
            this.$forceUpdate();
            if (
              this.dataForm.hasPage !== "undefined" &&
              this.dataForm.hasPage === false
            ) {
              this.tableData = res|| [];
            } else {
              this.tableData = res|| [];
              this.total = res.length?parseInt(res[0].cnt):0;
              this.total_page =res.length?parseInt(res[0].cnt/this.page.pagesize+1):1;
            }
            setTimeout(() => (this.$root.isLoading = false), 1000);
            // console.log(this.dataForm.selectRows, '------------------------- aaaaaaaa');
            // if (this.dataForm.selectRows.keys.length > 0) {
            // console.log(
            //   this.dataForm.selectRows.keys,
            //   this.dataForm.checkBoxKey,
            //   "------------------ this.dataForm.checkBoxKey"
            // );
            // 首次进入页面 回显选中值
            this.handleToggleSelect(
              this.dataForm.selectRows.keys,
              this.dataForm.checkBoxKey
            );
            // }
            // this.handleToggleSelect([], 'goodsInfoId')
          })
          .catch((err) => {
            this.$root.isLoading = false;
          });
      } else {
        // this.tableData = this.testTableData;
        this.initTestTableData(this.testTableData)
      }
    },
    //  静态初始化表格数据
    initTestTableData(list) {
      this.copyData = JSON.parse(JSON.stringify(list));
      this.page.pagesize = this.dataForm.pagesize||this.page.pagesize
      if (this.dataForm.isQdPage) {
        // 如果前端分页-自己组装截取数组显示
        const { pageindex, pagesize } = this.page;
        this.tableData = JSON.parse(JSON.stringify(list)).splice(
          (page - 1) * (pagesize),
          pagesize
        );
        if (this.tableData.length == 0) {
          // 如果当前页数据为0 则显示第一页数据
          this.page.pageindex = 1;
          this.tableData = JSON.parse(JSON.stringify(list)).splice(
            0,
            pagesize
          );
        }
        this.total_page = Math.ceil(list.length/pagesize) 
      } else {
        // 不分页
        this.tableData = list || [];
      }
      this.total = list.length;
    },
    // 改变当前页
    handleCurrentChange(val) {
      console.log(12121212);
      this.jumpPage = "";
      this.page.pageindex = val;
      this.$forceUpdate();
      if (this.dataForm.isQdPage) {
        // 静态数据 - 是否前端分页
        let copyItems = JSON.parse(JSON.stringify(this.copyData));
        const { pageindex, pagesize } = this.page;
        this.tableData = copyItems.splice((pageindex - 1) * pagesize, pagesize);
        this.$forceUpdate();
        return;
      }
      this.init();
    },
    // 改变页面size
    handleSizeChange(size) {
      this.jumpPage = "";
      this.page.pagesize = size;
      this.page.pageindex = 1;
      if (this.dataForm.isQdPage) {
        // 静态数据 - 是否前端分页
        let copyItems = JSON.parse(JSON.stringify(this.copyData));
        const { page, pagesize } = this.page;
        this.tableData = copyItems.splice((page - 1) * pagesize, pagesize);
        this.$forceUpdate();
        return;
      }
      this.init();
    },
    // 对象去重
    unique(arr, key) {
      let hash = {};
      return arr.reduce((item, next) => {
        hash[next[key]] ? "" : (hash[next[key]] = true && item.push(next));
        return item;
      }, []);
    },
    // 多选
    handleSelectionChange(val, row) {
      console.log(val, "-------------- 选中数据");
      console.log(this.$refs.queryTable, "--------- this.$refs.queryTable");
      let oldRows = [];
      if (this.dataForm.selectRows && this.dataForm.selectRows.rows) {
        oldRows =
          JSON.parse(JSON.stringify(this.dataForm.selectRows.rows)) || [];
      }
      // 单个勾选
      if (row) {
        // 判断当前行是新增/删除
        let index = val.findIndex(
          (item) =>
            item[this.dataForm.checkBoxKey] == row[this.dataForm.checkBoxKey]
        );
        let keys = [];
        if (this.dataForm.selectRows.keys) {
          keys = JSON.parse(JSON.stringify(this.dataForm.selectRows.keys));
        }
        if (index !== -1) {
          // 新增
          oldRows.push(row);
          keys.push(row[this.dataForm.checkBoxKey]);
        } else {
          // 删除
          oldRows.splice(
            oldRows.findIndex(
              (item) =>
                item[this.dataForm.checkBoxKey] ==
                row[this.dataForm.checkBoxKey]
            ),
            1
          );
          keys.splice(
            keys.findIndex((item) => item == row[this.dataForm.checkBoxKey]),
            1
          );
        }
        this.dataForm.selectRows.rows = oldRows;
        this.dataForm.selectRows.keys = keys;
      } else {
        let checkBoxKey = this.dataForm.checkBoxKey;
        let tableData = JSON.parse(JSON.stringify(this.tableData)); // 当前页面数据
        let newTableData = [...tableData, ...val]; // 汇总数据 - 加入选中页的数据
        let uniqueTableData = this.unique(
          JSON.parse(JSON.stringify(newTableData)),
          checkBoxKey
        ); // 去重
        if (uniqueTableData.length < newTableData.length) {
          // 如果去重后数据小于汇总数据  那么是添加  否则是删除
          console.log("这是添加");
        } else {
          console.log("这是删除");
        }

        // 全选/取消全选
        // 当全部选中时
        if (val.length !== 0 && uniqueTableData.length < newTableData.length) {
          let arr = this.dataForm.selectRows.rows.concat(val); // 合并数组
          let arrNew = this.unique(arr, checkBoxKey); // 通过set集合去重
          this.dataForm.selectRows.rows = arrNew;
          let keys = [];
          arrNew.map((item) => keys.push(item[checkBoxKey]));
          this.dataForm.selectRows.keys = keys;
        } else {
          // 当前页全不选时获取当前列表的数组
          let newArr = [];
          // 从选中的数组中删除 全不选的数组
          let toRemove = this.tableData;
          // 过滤
          newArr = this.dataForm.selectRows.rows.filter(
            (x) =>
              !toRemove.some((item) => x[checkBoxKey] === item[checkBoxKey])
          );
          this.dataForm.selectRows.rows = newArr;
          let keys = [];
          newArr.map((item) => keys.push(item[checkBoxKey]));
          this.dataForm.selectRows.keys = keys;
        }
      }
      this.$parent.$parent.dataForm.selectRows = {
        rows: this.dataForm.selectRows.rows || [],
        keys: this.dataForm.selectRows.keys || [],
      };
      console.log(this.$parent.$parent.dataForm.selectRows);
    },
    // 是否可以选择 forBidData 外部传入key 禁止选择
    selectable(row, rowIndex) {
      if (this.dataForm.forBidData && this.dataForm.forBidData.length > 0) {
        if (
          this.forBidData.findIndex(
            (item) =>
              item[
                this.dataForm[
                  this.dataForm.isRadio ? "radioKey" : "checkBoxKey"
                ]
              ] == row[this.dataForm.isRadio ? "radioKey" : "checkBoxKey"]
          ) !== -1
        ) {
          return false;
        }
      } else if (this.dataForm.forBidFn) {
        return this.dataForm.forBidFn(row);
      } else {
        // 是否是单选  单选disabled  多选-原生方法与disabled相反
        return this.dataForm.isRadio ? false : true;
      }
      return true;
    },
    // 回显选中值
    handleToggleSelect(selectedKeys, idName) {
      this.isLoading = true;
      this.$nextTick(() => {
        this.tableData.map((item) => {
          let selectedItem = null;
          if (selectedKeys && selectedKeys.length > 0) {
            selectedItem = selectedKeys.find((key) => key == item[idName]);
          }
          if (selectedItem) {
            this.$refs.queryTable &&
              this.$refs.queryTable.toggleRowSelection(item, true);
          } else {
            this.$refs.queryTable &&
              this.$refs.queryTable.toggleRowSelection(item, false);
          }
        });
        this.isLoading = false;
      });
    },
    // 刷新当前页
    refresh() {
      this.init();
    },
    // 重新加载第一页
    reload() {
      if (this.dataForm.isClearSelected) {
        this.$parent.$parent[this.dataForm.formName || "dataForm"].selectRows =
          {
            rows: [],
            keys: [],
          };
      }
      this.handleCurrentChange(1);
    },
    // 点击自定义按钮
    btnFun(item) {
      if (item.btnCode) {
        localStorage.setItem('perm', item.btnCode)
      }
      item.btnClick && item.btnClick(item);
    },
    /// 改变tab
    handleChangeCurrentIndex(item, index) {
      this.currentIndex = index;
      this.dataForm.query[this.dataForm.tabName] = item.value;
      this.$emit("changeTab", { item, index });
      this.reload();
    },
    // 单选选中的值
    handleSelectRadio(row, index) {
      this.$emit("handleRadioSelected", row);
    },
    // 表格富文本
    VNode(tag, text, children, el, attrs) {
      return {
        tag,
        text,
        children,
        el,
        attrs,
      };
    },
    // Dom转化为富文本
    DomToVnode(dom) {
      let tag = dom.tagName;
      let children = [];
      for (let node of dom.childNodes) {
        if (node.nodeType == 3) {
          children.push(
            this.VNode(undefined, node.data, undefined, node, undefined)
          );
        } else {
          children.push(this.DomToVnode(node));
        }
      }
      let attrs = {};
      for (let attr of dom.attributes) {
        attrs[attr.name] = attr.value;
      }
      return this.VNode(tag, undefined, children, dom, attrs);
    },
    // 递归函数
    recursion(arrs) {
      return arrs.map((item) => {
        if (item.children) {
          return (
            <el-table-column
              render-header={() => (
                <div>
                  {item.required && (
                    <span style="color: red; margin-right: 3px;">*</span>
                  )}
                  {item.title}
                </div>
              )}
              // label={item.title}
              width={item.width || ""}
              align={item.align || "center"}
              fixed={item.fixed || false}
              sortable={item.sortable || false}
              show-overflow-tooltip={item.isShowTip || false}
            >
              {this.recursion(item.children)}
            </el-table-column>
          );
        } else {
          if (item.isHtml) {
            return (
              <el-table-column
                render-header={() => (
                  <div>
                    {item.required && (
                      <span style="color: red; margin-right: 3px;">*</span>
                    )}
                    {item.title}
                  </div>
                )}
                align={item.align || "center"}
                fixed={item.fixed || false}
                show-overflow-tooltip={item.isShowTip || false}
                sortable={item.sortable || false}
                formatter={(row, column, cellValue, index) => {
                  let objE = document.createElement("div");
                  objE.innerHTML = row[item.valueName] || "<span>-</span>";
                  // DOM转化为VNODE
                  let vnode = this.DomToVnode(objE);
                  return vnode;
                }}
              ></el-table-column>
            );
          } else if (item.customRander) {
            return (
              <el-table-column
                render-header={() => (
                  <div>
                    {item.required && (
                      <span style="color: red; margin-right: 3px;">*</span>
                    )}
                    {item.title}
                  </div>
                )}
                align={item.align || "center"}
                prop={item.valueName}
                fixed={item.fixed || false}
                show-overflow-tooltip={item.isShowTip || false}
                sortable={item.sortable || false}
                formatter={(row, column, cellValue, index) => {
                    let qdPageIndex = (this.page.pageindex - 1)*this.page.pagesize + index + 1
                    return item.customRander(row, this.dataForm.isQdPage?qdPageIndex-1:index)
                  }
                }
                width={item.width || ""}
              ></el-table-column>
            );
          } else if (item.isShowTip) {
            return (
              <el-table-column
                render-header={() => (
                  <div>
                    {item.required && (
                      <span style="color: red; margin-right: 3px;">*</span>
                    )}
                    {item.title}
                  </div>
                )}
                width={item.width || ""}
                align={item.align || "center"}
                fixed={item.fixed || false}
                sortable={item.sortable || false}
                // show-overflow-tooltip={item.isShowTip || false}
                formatter={(row, column, cellValue, index) => {
                  return (
                    <el-tooltip
                      class="table-tooltip"
                      effect="dark"
                      content={row[item.valueName]}
                      placement="top"
                    >
                      <div class="one-hidden">{row[item.valueName]}</div>
                    </el-tooltip>
                  );
                }}
              ></el-table-column>
            );
          } else {
            return this.createElTableColumn(
              item.required,
              item.valueName,
              item.title,
              item.width,
              item.align,
              item.fixed,
              item.isShowTip,
              item.sortable
            );
          }
        }
      });
    },
    // 无自定义customRander  创建的el-table-column
    createElTableColumn(
      required,
      prop,
      label,
      width,
      align,
      fixed,
      isShowTip,
      sortable
    ) {
      return (
        <el-table-column
          render-header={() => (
            <div>
              {required && (
                <span style="color: red; margin-right: 3px;">*</span>
              )}
              {label}
            </div>
          )}
          prop={prop}
          width={width || ""}
          fixed={fixed || false}
          sortable={sortable || false}
          align={align || "center"}
          show-overflow-tooltip={isShowTip || false}
        ></el-table-column>
      );
    },
  },
  render(h) {
    return (
      <div>
        {((this.tabsList && this.tabsList.length > 0) ||
          (this.handleList && this.handleList.length > 0) ||
          (this.tip && this.tip.length > 0)) && (
          <div class="header-operation">
            {this.tabsList && this.tabsList.length > 0 && (
              <div class="tabs-list mb16" ref="tabsList">
                {this.tabsList.map((item, index) => (
                  <div
                    class={
                      this.currentIndex == index
                        ? "selected-item table-item"
                        : "table-item"
                    }
                    onclick={() => this.handleChangeCurrentIndex(item, index)}
                  >
                    {item.name}
                  </div>
                ))}
              </div>
            )}
            {this.tip && this.tip.length > 0 && (
              <span style="flex:1; text-align:right;">
                {this.tip + (this.tableRes.totalAmt || "0.00") + "元"}
              </span>
            )}
            {this.handleList && this.handleList.length > 0 && (
              <div class="table-handle-list">
                {this.handleList.map(item => 
                  <div class="ml16">
                    {
                      item.btnCode && <button-tree btnCode={item.btnCode}>
                        <div slot="visible_true" class="mb16" ref="handleList">
                          <b-button-new 
                            hollow={item.isHollow}
                            onclick={() => this.btnFun(item)}
                            text={item.name}
                          >
                          </b-button-new>  
                        </div>
                      </button-tree>
                    }
                    {
                      !item.btnCode && <div slot="visible_true" class="mb16" ref="handleList">
                        <b-button-new 
                          slot="visible_true"
                          hollow={item.isHollow}
                          onclick={() => this.btnFun(item)}
                          text={item.name}
                        >
                        </b-button-new>
                      </div>
                    }
                  </div>
                )}
              </div>
            )}
          </div>
        )}
        {this.showTable && (
          <el-table
            ref="queryTable"
            data={this.tableData}
            max-height={this.dataForm.maxheight ? this.dataForm.maxheight : this.testTableData.length? '':'auto'}
            height={this.dataForm.height ? this.dataForm.height : this.testTableData.length? '':'auto'}
            row-key={this.dataForm.checkBoxKey}
            highlight-current-row={this.dataForm.isRadio}
            class={['table-header-wrapper b-query-table', {'h321': this.dataForm.maxheight=='375px'}]}
            header-cell-class-name="table-header-title"
            row-class-name="table-row-class"
            onselect={this.handleSelectionChange}
            onselect-all={this.handleSelectionChange}
            v-loading={this.isLoading}
            element-loading-background="rgba(255, 255, 255, 0.5)"
            element-loading-text="数据正在加载中"
            element-loading-text-color="red"
          >
            {this.dataForm.isRadio && (
              <el-table-column
                label=" "
                width="55"
                align="center"
                fixed="left"
                formatter={(row, column, cellValue, index) => (
                  <el-radio
                    oninput={() => this.handleSelectRadio(row, index)}
                    v-model={this.dataForm.defaultRadio}
                    label={row[this.dataForm.radioKey]}
                    disabled={this.selectable(row, index) ? true : false}
                  >
                    &nbsp;
                  </el-radio>
                )}
              ></el-table-column>
            )}
            {this.dataForm.checkBoxKey && (
              <el-table-column
                fixed="left"
                type="selection"
                reserve-selection={!this.dataForm.isClearSelected}
                width="55"
                selectable={this.selectable}
              ></el-table-column>
            )}
            {this.dataForm.hasIndex && (
              <el-table-column
                label="序号"
                type="index"
                align="center"
                width="50"
                sortable
              ></el-table-column>
            )}
            {this.recursion(this.initColumns)}
            <div slot="empty">暂无数据</div>
          </el-table>
        )}
        {this.dataForm.hasPage === undefined && (
          <el-pagination
            class="query-pagination"
            total={this.total}
            layout="total, sizes, slot, ->, prev, pager, next, slot"
            oncurrent-change={(e) => this.handleCurrentChange(e)}
            onsize-change={(e) => this.handleSizeChange(e)}
            current-page={this.page.pageindex}
            page-size={this.page.pagesize}
            page-sizes={this.dataForm.isQdPage ? [5, 10, 20, 30, 40, 50, 100] : [10, 20, 30, 40, 50, 100]}
            // pagesize.sync={this.page.pagesize}
            // {...{['on-update:page-size']: this.page.pagesize}}
            background
          >
            {this.dataForm.checkBoxKey && (
              <span
                key={1}
                style="font-size: 13px; line-height: 32px; height: 32px; font-weight: normal;"
              >
                已选
                {this.dataForm.selectRows && this.dataForm.selectRows.keys
                  ? this.dataForm.selectRows.keys.length
                  : 0}
                条
              </span>
            )}
            <div class="jumper">
              跳至
              <input
                style="width:50px; border-color: #EBEEF5;"
                v-model={this.jumpPage}
                {...{
                  on: {
                    keyup: (e) => {
                      if (
                        isNaN(parseInt(this.jumpPage)) ||
                        parseInt(this.jumpPage) <= 0
                      ) {
                        this.jumpPage = "";
                        return;
                      }
                      if (e.code === "Enter") {
                        if (this.jumpPage > this.total_page) {
                          this.jumpPage = "";
                          return;
                        }
                        this.page.page = parseInt(this.jumpPage);
                        this.handleCurrentChange(parseInt(this.jumpPage));
                      }
                    },
                  },
                }}
              ></input>
              页
              <a class="theme-btn-solid btn-jump" 
                {...{
                    on: {
                      click: e => {

                        if (isNaN(parseInt(this.jumpPage)) || parseInt(this.jumpPage) <= 0) {
                          this.jumpPage = ''
                          return
                        }
                        if (!this.jumpPage || this.jumpPage > this.total_page) {
                          this.jumpPage = ''
                          return
                        }
                        this.page.page = parseInt(this.jumpPage)
                        this.handleCurrentChange(parseInt(this.jumpPage))
                      }
                    },
                  }
                }
              >
                跳转
              </a>
            </div>
          </el-pagination>
        )}
      </div>
    );
  },
};
</script>
<style lang="scss">
@import "@/styles/variables.scss";
@import "@/styles/element-variables.scss";
@import "@/styles/_themes.scss";
@import "@/styles/_handle.scss";
.mb24 {
  margin-bottom: 24px;
}
.mb16 {
  margin-bottom: 16px;
}
.header-operation {
  display: flex;
  .tabs-list {
    display: flex;
    align-items: center;
    height: 32px !important;
    .table-item {
      margin-right: 40px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }
    .selected-item {
      position: relative;
      font-size: 16px;
      @include font_color("colorTheme");
      &::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        height: 3px;
        border-radius: 5px;
        @include background_color("colorTheme", 1);
        content: "";
      }
    }
  }
  .table-handle-list {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
}
.el-pagination {
  padding: 2px 5px 1px !important;
  .el-pagination__rightwrapper {
    > slot {
      > span {
        display: none;
      }
      .jumper {
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        line-height: 32px !important;
        font-weight: normal;
        margin-left: 8px;
        > input {
          outline: none;
          height: 32px !important;
          margin: 0 5px;
          text-align: center;
          border: 1px solid #d2d2d2;
          border-radius: 2px;
        }
        .btn-jump {
          height: 32px !important;
          line-height: 32px !important;
          padding: 0 10px;
          margin-left: 10px;
          border-radius: 2px;
        }
      }
    }
  }
  > slot {
    > .jumper {
      display: none;
    }
  }
}

.el-table__body-wrapper {
  // 滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #e4e7ed;
  }
  &::-webkit-scrollbar-track {
    background: #f2f6fc;
  }
}

.el-tooltip__popper.is-dark {
  max-width: 342px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: justify;
  background: rgba($color: #000000, $alpha: 0.85) !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  bottom: -5px !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: rgba($color: #000000, $alpha: 0.85) !important;
}

</style>
<style>
.el-pagination .el-select .el-input .el-input__inner {
  min-height: 32px !important;
}
.el-pagination__total {
  height: 32px !important;
  line-height: 32px !important;
}
/* .el-table__fixed-right{
  right: 4px !important;
}
.el-table__fixed-right-patch{
  width: 4px !important;
  background: #f5F7FA !important;
} */

.el-table.b-query-table.h321 .el-table__body-wrapper{
  height: 321px !important;
}
</style>
